import { ArrowRight } from "@nutui/icons-react-taro";
import { Button, Cell, Form, Input, Picker } from "@nutui/nutui-react-taro";
import "./index.less";
import { useState } from "react";
import { getMerchantTypeApi, userBindingApi } from "../../../servers/servers";

import { useRequest } from "ahooks";
import Taro from "@tarojs/taro";

const binding = () => {
  const pickerOptions = [
    { value: 1, text: "渠道" },
    { value: 2, text: "企业" },
  ];

  const [form] = Form.useForm();

  // 查询结果
  const [result, setResult] = useState("");

  const { loading, runAsync } = useRequest(
    async (values) => {
      return await userBindingApi({
        ...values,
      });
    },
    {
      manual: true,
    }
  );

  const { data } = useRequest(async () => {
    const _res = await getMerchantTypeApi();
    return (
      _res?.data?.map((e) => {
        return {
          value: e.type,
          text: e.title,
        };
      }) || []
    );
  });

  return (
    <>
      <Cell.Group>
        <Cell
          title={
            <div style={{ display: "flex", alignItems: "center" }}>
              <h3>用户渠道绑定</h3>
            </div>
          }
        />
        <Cell>
          <Form
            form={form}
            className="binding_form"
            style={{
              width: "100%",
              "--nutui-form-item-label-width": "40px",
            }}
            footer={false}
            onFinish={async (values) => {
              Taro.showModal({
                title: "确定绑定吗？",
                success: async (res) => {
                  if (res.confirm) {
                    try {
                      Taro.showLoading({
                        title: "绑定中...",
                      });
                      const { data } = await runAsync({
                        ...values,
                      });

                      setResult(data);

                      Taro.hideLoading();
                      form.resetFields();

                      Taro.showToast({
                        title: "绑定成功",
                        icon: "success",
                        duration: 2000,
                      });
                    } catch (error) {
                      Taro.hideLoading();
                    }
                  } else if (res.cancel) {
                    console.log("用户点击取消");
                  }
                },
              });
            }}
          >
            <Form.Item
              label="电话号码"
              name="mobile"
              rules={[{ required: true }]}
              className="asqweryqweioryu"
            >
              <Input
                style={{
                  height: "120rpx",
                  borderRadius: "20rpx",
                  border: "1px solid #DFE2EB",
                  paddingLeft: 12,
                }}
                autoFocus
                placeholder="请输入电话号码"
                type="digit"
              />
            </Form.Item>

            <Form.Item
              label="绑定类型"
              name="channel"
              trigger="onConfirm"
              getValueFromEvent={(...args) => args[1]}
              onClick={(event, ref) => {
                ref.open();
              }}
              className="asqweryqweioryu"
            >
              <Picker options={[data]}>
                {(value) => {
                  return (
                    <Cell
                      style={{
                        padding: 0,
                        "--nutui-cell-divider-border-bottom": "0",
                        height: "120rpx",
                        borderRadius: "20rpx",
                        border: "1px solid #DFE2EB",
                        paddingLeft: 12,
                      }}
                      className="nutui-cell--clickable"
                      title={
                        value.length ? (
                          <div style={{ width: 200 }}>
                            {
                              data.filter((po) => po.value === value[0])[0]
                                ?.text
                            }
                          </div>
                        ) : (
                          "请选择绑定类型"
                        )
                      }
                      extra={<ArrowRight />}
                      align="center"
                    />
                  );
                }}
              </Picker>
            </Form.Item>
          </Form>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            size="xlarge"
            onClick={() => {
              form.submit();
            }}
            loading={loading}
          >
            绑定
          </Button>
        </Cell>

        <Cell>
          <Button
            block
            type="primary"
            fill="outline"
            size="xlarge"
            onClick={() => {
              // Taro.navigateTo({
              //   url: "/pages/cart/binding/bingdinLog/index",
              // });
              Taro.navigateTo({
                url: `/pages/cart/binding/bingdinLog/index`,
              });
            }}
          >
            操作日志
          </Button>
        </Cell>

        <Cell> {result ? <>绑定结果：{result?.msg} </> : ""}</Cell>
      </Cell.Group>

      <Cell.Group></Cell.Group>
    </>
  );
};

export default binding;
